<template>
    <div class="info-box">
        <div class="info-title">
            <h3>消息通知</h3>
            <el-button type="primary" @click="releaseFn">发布消息</el-button>
        </div>
        <div class="info-content">
            <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%">
                <el-table-column prop="startTime" label="通知时间">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间">
                </el-table-column>
                <el-table-column prop="messageContent" label="消息内容">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="">删除</el-button>
                        <el-button type="text" size="small" @click="">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount"
                style="margin-top: 20px; text-align: center;">
            </el-pagination>
        </div>
        <el-dialog title="发布消息" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="width:70%; margin:0 auto;">
                <!-- <el-form-item label="用户名 :" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="选择班级 :" prop="classValue">
                    <el-select
                        v-model="form.classValue"
                        multiple
                        collapse-tags
                        placeholder="请选择">
                        <el-option
                        v-for="item in form.classOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通知时间 :" prop="startTime">
                    <el-date-picker
                        v-model="form.startTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间 :" prop="endTime">
                    <el-date-picker
                        v-model="form.endTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="消息内容 :" prop="content">
                    <el-input v-model="form.content" type="textarea" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {
        },
        data () {
            return {
                tableData: [
                    {
                        startTime: '20180102',
                        endTime: '20180103',
                        messageContent: '我是一个小小鸟'
                    },
                    {
                        startTime: '20180102',
                        endTime: '20180103',
                        messageContent: '我是一个小小鸟'
                    }
                ],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                dialogFormVisible: false,
                form: {
                    classOptions: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    classValue: '',
                    startTime: '',
                    endTime: '',
                    content: ''
                },
                //弹窗表单验证
				rules: {
                    classValue: [
                        { required: true, message: '请选择班级', trigger: 'change' }
                    ],
                    startTime: [
                        { type: 'date', required: true, message: '请选择通知时间', trigger: 'change' }
                    ],
                    endTime: [
                        { type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写消息内容', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            //发布消息
            releaseFn() {
                this.dialogFormVisible = true
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage
				this.init()
            },
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('submit')
                    }
                })
            }
        }

    }
</script>
